<% layout('/layouts/default.html', {title: '', libs: ['dataGrid']}){ %>
<!-- <link rel="stylesheet" href="${ctxStatic}/modules/sys/sysDesktop.css?${_version}"> -->
<style>
    .bindOne{
        border-radius: 4px;
        margin: 0px 5px 10px 5px;
        height: 300px;
        text-align: center;
        background: #fff;
        -webkit-transition: -webkit-transform .3s;
        transition: -webkit-transform .3s;
        transition: transform .3s;
        transition: transform .3s,-webkit-transform .3s;
        padding: 0 10px;
        -webkit-box-sizing: border-box;
        box-sizing: border-box;
    }
    .BoxTitAll{
        display: -webkit-box;
        display: -ms-flexbox;
        display: flex;
        -webkit-box-orient: horizontal;
        -webkit-box-direction: normal;
        -ms-flex-direction: row;
        flex-direction: row;
        -webkit-box-pack: justify;
        -ms-flex-pack: justify;
        justify-content: space-between;
        height: 15%;
        line-height: 54px;
    }
    .tabBody li{
        display: inline-block;
        margin-right: 20px;
        font-size:14px;
    }
    .tabActive{
        color: #1F69E6;
        border-bottom: 2px solid #1F69E6;
    }
    .defaultColor_text{
        font-size: 16px;
        font-weight: 700;
        margin: 0 5px;
        color: #1F69E6;
        line-height: 54px;
    }
    .handTable{
        width: 100%;
        height: 85%;
    }
    .col-md-6{
        padding: 5px 10px 5px 2px!important;
    }

    .jqgridborder{
        border-bottom: 1px dashed #CCC !important;
    }

    .ui-jqgrid .ui-priority-secondary{
        background: white !important;
    }

    .ui-row-ltr{
        border: 0px !important;
    }

    #gview_noticeNotice .ui-jqgrid-hbox{
        display: none;
    }

    #gbox_noticeNotice{
        border: none;
    }

    #gview_todolist .ui-jqgrid-hbox{
        display: none;
    }

    #gbox_todolist{
        border: none;
    }

    #todolist tr td{
        border: none;
        border-bottom: 1px dashed #CCC;
    }

    #noticeNotice tr td{
        border: none;
    }

    #noticeNotice tr td{
        border-bottom: 1px dashed #CCC;
    }

    .jqgfirstrow td{
        border-bottom: none !important;
    }

    #taskAlertInformationDataGrid tr{
        cursor:pointer;
    }

    #noticeNotice tr{
        cursor:pointer;
    }

    #todolist tr{
        cursor:pointer;
    }

    #noticeNotice tr:hover{
        text-decoration:underline;
        color: rgb(31, 105, 230);
    }

    #todolist tr:hover{
        text-decoration:underline;
        color: rgb(31, 105, 230);
    }


</style>
<div class="content pb0">
    <div class="row">
        <div class="col-md-6">
            <div class="bindOne">
                <div class="BoxTitAll">
                    <h1 class="defaultColor_text">待办事项</h1>
                    <div>
                        <span class="moreColor" onclick="goMsgList()">
                            <a href="#"><i class="icon-options"></i></a>
                        </span>
                    </div>
                </div>
                <div class="handTable">
                    <table id="todolist"></table>
                </div>
            </div>


        </div>
        <div class="col-md-6">
            <div class="bindOne">
                <div class="BoxTitAll">
                    <h1 class="defaultColor_text">通知公告</h1>
                    <div>
                        <span class="moreColor" onclick="goMsgInner()">
                            <a href="#"><i class="icon-options"></i></a>
                        </span>
                    </div>
                </div>
                <div class="handTable">
                    <table id="noticeNotice"></table>
                </div>
            </div>
        </div>
        <div class="col-md-6">
            <div class="bindOne">
                <div class="BoxTitAll">
                    <h1 class="defaultColor_text">任务逾期情况</h1>
                    <span class="moreColor" onclick="renwuyuqi()">
                            <a href="#"><i class="icon-options"></i></a>
                        </span>
                </div>
                <div class="handTable">
                    <table id="taskAlertInformationDataGrid"></table>
                </div>
            </div>


        </div>
        <div class="col-md-6">
            <div class="bindOne">
                <div class="BoxTitAll">
                    <h1 class="defaultColor_text" onclick="openitem(1)">任务进展</h1>
                    <span class="moreColor" style="margin-left: 1vw">
                            <a href="#" id="linkPoint" onclick="linkPoint()" style="font-size: 16px;font-weight: 700;color: #ff8b19">年度扣分分值：${point}</a>
                        </span>
                </div>
                <div class="handTable" id="taskProgress">
                </div>
            </div>
            <div>

            </div>
        </div>
    </div>


</div>

<% } %>
<script src="${ctxStatic}/jquery/jquery-ui-sortable-1.12.1.min.js"></script>
<script src="${ctxStatic}/echarts/4.2/echarts.min.js"></script>
<script>
    let taskProgressEcharts;


        $.ajax({
            type: 'get',
            url: "${ctx}/home/supIndex/queryGatewayProgress",
            success:function(res){
                let twoListName = res.nameList
                let twoList = res.list
                //任务进展
                taskProgressEcharts = echarts.init(document.getElementById('taskProgress'), 'default');
                taskProgressEcharts.on('legendselectchanged', function (params) {
                    taskProgressEcharts.setOption({
                        legend: { selected: { [params.name]: true } },
                    });
                    js.addTabPage( null,'任务进展', '${ctx}/home/supIndex/gatewayProgress?name='+params.name, true, true);
                })
                taskProgressEcharts.setOption({
                    tooltip: {
                        trigger: 'item'
                    },
                    grid: {
                        bottom: '20%'
                    },
                    legend: {
                        orient: 'vertical',
                        data: twoListName,
                        y: 'center',
                        right: '0%',
                        itemWidth: 45,
                        itemHeight: 20,
                        itemGap: 15,
                        textStyle: {
                            fontSize: 14,
                            color: "rgba(23, 22, 22, 1)"
                        },
                        formatter: function (name) {
                            let tarValue;
                            for (let i = 0, l = twoList.length; i < l; i++) {
                                if (twoList[i].name == name) {
                                    tarValue = twoList[i].value;
                                }
                            }

                            return name + "：" + tarValue;
                        }
                    },
                    series: [
                        {
                            type: 'pie',
                            radius: ['40%', '60%'],
                            avoidLabelOverlap: false,
                            label: {
                                show: false,
                                position: 'center'
                            },
                            itemStyle: {
                                normal: {
                                    color: function (params) {
                                        var colorList = [
                                            '#4b87ff',
                                            '#FF0000',
                                            '#1abd6e',
                                            '#800080',
                                            '#ff8b19'
                                        ];
                                        return colorList[params.dataIndex]
                                    },
                                }
                            },
                            labelLine: {
                                show: false
                            },
                            data: twoList
                        }
                    ]
                })
            }
        });

        //任务预警信息
        $('#taskAlertInformationDataGrid').dataGrid({
            url:"${ctx}/home/supIndex/queryGatewayWarning?limit=1",
            sortableColumn: false, // 列表不允许排序
            autoGridHeight: function(){
                return $('.handTable').height()-50;
            },
            emptyDataHint: true, 	// 表格内没有数据的时候是否提示 “无数据显示”  v4.1.7
            emptyDataHintContent: '<center>'+$.jgrid.defaults.emptyrecords+'</center>',
            columnModel: [
                {header:'${text("主键")}', name:'id',  width:150, align:"left", hidden:true},
                {header:'${text("action主键")}', name:'actionId', width:150, align:"left", hidden:true},
                {header:'${text("任务标题")}', name:'taskTitle', index:'a.task_title', width:150, align:"left"},
                {header:'${text("任务类型")}', name:'taskTypeName', index:'a.task_type_code', width:150, align:"left"},
                {header:'${text("任务内容")}', name:'taskContent', index:'a.task_content', width:150, align:"left"},
                {header:'${text("逾期情况")}', name:'feedbackCount', index:'a.task_leader_name', width:150, align:"left",formatter: function(val, obj, row, act){
                        return getFeedbackCount(row.feedbackCount, row.feedbackCount1);
                    }
                    },
            ],
            // 加载成功后执行事件
            ajaxSuccess: function(data){

            },
            onSelectRow: function(id, isSelect, event) {
                let obj=$('#taskAlertInformationDataGrid').dataGrid('getRowData', id);
                js.addTabPage(null, "任务详情", "${ctx}/audit/taskReceive/taskReceiveFive??isNewRecord=true&id="+obj.actionId+"&taskId="+obj.id, true,true);

            }
        });

    // 优化逾期情况的展示样式
    function getFeedbackCount(feedbackCount, feedbackCount1) {
        let tempStr = '';
        if (feedbackCount > 0 && feedbackCount1 > 0) {
            tempStr = '<span  style="color: #ff8b19">'+'逾期未反馈&nbsp;'+feedbackCount+'&nbsp;次'+',逾期反馈&nbsp;'+feedbackCount1+'&nbsp;次'+'</span>';
        }
        if (feedbackCount > 0 && feedbackCount1 == 0) {
            tempStr = '<span  style="color: #ff8b19">'+'逾期未反馈&nbsp;'+feedbackCount+'&nbsp;次'+'</span>';
        }
        if (feedbackCount == 0 && feedbackCount1 > 0) {
            tempStr = '<span  style="color: #ff8b19">'+'逾期反馈&nbsp;'+feedbackCount1+'&nbsp;次'+'</span>';
        }
        return tempStr;
    }

        // 通知公告
        $("#noticeNotice").dataGrid({
            autoGridHeight: function(){
                return $('.handTable').height()-30;
            },
            url:"${ctx}/msg/msgInner/listData",
            sortableColumn: false, // 列表不允许排序
            showRownum: false,
            altRows: true,
            columnModel: [
                {header:'${text("主键")}', name:'id',  width:200, align:"left", hidden:true},
                {header:'${text("标题")}', name:'msgTitle',width:200,  align:"left"},
                {header:'${text("时间")}', name:'createDate', align:"center"},
            ],
            // 加载成功后执行事件
            ajaxSuccess: function(data){

            },
            onSelectRow: function (id, isSelect, event) {
                let obj = $('#noticeNotice').dataGrid('getRowData', id);
                js.addTabPage(null, "查看消息", "${ctx}/msg/msgInner/view?id="+ obj.id, true,true);
            }
        });

        //待办事项
        $("#todolist").dataGrid({
            url:"${ctx}/backlog/dcSupBacklog/getPage?dataStatus=1",
            sortableColumn: false, // 列表不允许排序
            autoGridHeight: function(){
                return $('.handTable').height()-30;
            },
            showRownum: false,
            altRows: true,
            columnModel: [
                {header:'${text("主键")}', name:'id', index:'a.id', width:0, align:"left", hidden:true},
                {header:'${text("内容")}', name:'backlogContent',width:200,  align:"left"},
                {header:'${text("时间")}', name:'createDate',  align:"center"},
            ],
            // 加载成功后执行事件
            ajaxSuccess: function(data){
                // actions.push('<a href="${ctx}/msg/msgInner/view?id='+row.id+'" class="btnList" title="${text("查看消息")}"><i class="fa fa-book"></i></a>&nbsp;');
            },
            onSelectRow: function(id, isSelect, event) {
                let obj = $('#todolist').dataGrid('getRowData', id);
                js.addTabPage(null, "查看消息", "${ctx}/backlog/dcSupBacklog/backlogView?id="+ obj.id, true,true);
            },

        })

        function goMsgInner(){
            js.addTabPage(null, "站内消息", "${ctx}/msg/msgInner/list", true,true);
        }

    function goMsgList(){
        js.addTabPage(null, "查看全部消息", "${ctx}/backlog/dcSupBacklog/backlogList", true,true);
    }
    //打开任务逾期信息
    function renwuyuqi() {
        js.addTabPage(null, "任务逾期信息", "${ctx}/home/supIndex/queryGatewayWarningDetail", true,true)
    }



    function linkPoint(){
        js.addTabPage(null, "扣分详情", "${ctx}/dceconomicindicator/dcSupTaskScore/listDes?&echart=2", true,true)
    }

    $(function(){
        $(window).resize(function(){
            var footerHeight = $('.main-footer').outerHeight() || 0;
            var windowHeight = $(window).height();
            $('.content').css('min-height', windowHeight - footerHeight);
            taskProgressEcharts.resize()
        })
        // $('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
        //     $(window).resize();
        // });
        // $('.ui-sortable').sortable({
        //     connectWith : '.ui-sortable',
        //     handle      : '.box-header, .nav-tabs',
        //     placeholder : 'sort-highlight',
        //     forcePlaceholderSize: true,
        //     zIndex : 999999
        // }).find('.box-header, .nav-tabs').css('cursor', 'move');

        //    待办已办切换
        // $(".tabBody .tab-item").click(function() {
        //     $(this).addClass("tabActive").siblings().removeClass("tabActive");
        //     // $(".products .mainCont").eq($(this).index()).show().siblings().hide();
        // })

    });
    function openitem(param){
        let content = ""
        if(param==1){
            content = "1. 当前年<br>2. 自己牵头单位<br>3. 序时推进：反馈时选择序时推进的反馈条数；<br>滞后时序：反馈时选择滞后时序的反馈条数；" +
                "<br>已完成：反馈是选择已完成的反馈条数；<br>未完成：反馈时选择未完成的反馈条数；" +
                "<br>逾期未反馈：反馈结束时间小于现在，并且未反馈的反馈条数；"

        }else if(param==2){
            content = "1. 当前年<br>2. 自己单位<br>3. 分发表中存在逾期未反馈的条数；"
        }else if(param==3){
            content = "1. 当前年<br>2. 自己单位<br>3. 通过查出反馈页面中选择进度滞后和未完成的，向前推算出分发表中存在上述条件的条数；"
        }

        js.layer.open({
            type: 0,
            title: ['取数规则'],
            area: ['800px', '300px'],
            btn: ['确定'],
            content: content,
            yes: function(index, layero){
                //do something
                layer.close(index); //如果设定了yes回调，需进行手工关闭
            }
        });
    }

</script>